<template>
  <div id="favorite" class="mt24">
    <div class="favorite0-hd" style="margin-bottom: 22px;" >
      <h2 class="hd fl">{{title}}</h2>
    </div>
     <div class="prolist-wrap" v-if="favortes.length<=0">
        <!-- 喜欢商品为空 -->
      <div class="empty" >
        <p class="mb36">{{none}}</p>
        <el-button type="primary" @click="goto(index)">去逛逛</el-button>
      </div>
    </div>

    <div class="prolist-wrap" v-if="favortes.length>0">
      <ul class="prolist-inner">
        <li class="prolist-item" v-for="(value,index) in favortes" :key="index" @click="detail(value.id)">
            <div class="prolist-image">
              <img :src="value.imgs.split(',')[0]" alt />
            </div>
            <div class="prolist-article">
              <h6 class="prolist-title">{{value.productName |format }}</h6>
              <div class="prolist-tag">
                <div class="prolist-title" >
                  <span style ='font-size:18px'>￥{{value.shopPrice}}</span>
                </div>
              </div>
            </div>
        </li>
      </ul>
    </div>
    <!-- <div v-if="favortes" >
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "喜欢的商品",
      none: "您还没有喜欢过任何商品，快去逛逛吧~将喜欢的商品收录到这里！",
      favortes: []
    };
  },
  filters: {
    format(val) {
      return val.substring(0,16);
    }
  },
  created(){
    this.getList()
  },
  methods: {
    goto(index) {
      this.$router.push("/");
    },
    getList(size,page){
      this.EventBus.$emit("active", 5);
      this.axios.post("/product/fav/mine").then((resp)=>{
          if(resp.code==0){
              this.favortes = resp.data.records
          }
        })
    },
    detail(id){
      this.$router.push({
        name:"Detail",
        query: {
          id:id
        }
      });
    }
  }
};
</script>

<style scoped>
#favorite {
  width: 1080px;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
  /* background-color: antiquewhite; */
}

/* 标题 */
.favorite0-hd {
  height: 22px;
  margin-bottom: 36px;
  /* background-color: aqua; */
}
.hd {
  font-size: 18px;
  line-height: 1;
}

.empty {
  padding-top: 20%;
  text-align: center;
  padding-bottom:35%;
}
.el-button--primary {
  width: 256px;
  background-color: #29a3d6;
}
.el-button--primary:hover {
  background-color: #0076a4;
}

.prolist-wrap {
  overflow: hidden;
  position: relative;
  padding: 0px 38px;
}
.prolist-inner {
  margin-left: -24px;
  /* margin-top: -44px; */
}
.prolist-item {
  float: left;
  width: 231px;
  height: 325px;
  margin-left: 24px;
  border: 1px solid #fff;
  /* background-color: darkorchid; */
}
.prolist-box,
.prolist-image {
  position: relative;
  width: inherit;
}
.prolist-image {
  width: 231px;
  height: 231px;
  margin-bottom: 13px;
  /* background-color: darkturquoise; */
}
.prolist-image img {
  width: 100%;
  height: 100%;
}
.prolist-article {
  overflow: hidden;
  font-size: 12px;
}
.prolist-article .prolist-title {
  overflow: hidden;
  height: 36px;
  font-size: 14px;
  line-height: 18px;
  /* background-color: deeppink; */
}
.prolist-title h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.prolist-article .prolist-tag {
  font-size: 18px;
  color: #29a3d6;
}
.prolist-article .prolist-price {
  position: relative;
  margin-top: 13px;
  height: 18px;
  line-height: 18px;
  text-align: left;
  /* background-color: darkorange; */
}
.prolist-price span {
  font-size: 18px;
  /* text-align: left !important; */
}
.prolist-inner .prolist-item:hover {
  cursor: pointer;
  border: 1px solid #d1d6d6;
}
/* 分页 */
.page {
  margin: 20px 0 40px;
  margin-bottom: -33%;
}
</style>
